<template>
    <el-select v-model="value" clearable @change="change" :size="size" :multiple="multiple">
        <el-option
                v-for="item in autoSelectData[dataType]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</template>
<script>
    import {mapState} from 'vuex'

    export default {
        name: 'autoSelectForm',
        data() {
            return {
                value: this.defaultValue
            }
        },
        props: {
            dataType: String,
            fieldName: String,
            selectCb: Function,
            defaultValue: {},
            multiple: Boolean,
            size: {
                type: String,
                default: 'small'
            }
        },
        computed: {
            ...mapState({
                autoSelectData: function (state) {
                    if (!state.common.autoSelectData[this.dataType]) {
                        return {
                            [this.dataType]: []
                        }
                    }
                    return state.common.autoSelectData
                }
            })
        },
        methods: {
            change(value) {
                this.$emit('selectCb', {
                    fieldName: this.fieldName,
                    value
                })
            }
        },
        created() {
            if (!this.autoSelectData[this.dataType] || this.autoSelectData[this.dataType].length === 0) {
                this.$store.dispatch('common/getAutoSelectData', {
                    dataType: this.dataType
                })
            }
        },
        watch: {
            defaultValue: function (n) {
                this.value = n
            }
        }
    }
</script>
